<template>
  <div class="pdf-preview">
    <div class="pdf-toolbar">
      <el-button-group>
        <el-button 
          :icon="ArrowLeft" 
          :disabled="currentPage <= 1"
          @click="previousPage"
        >
          上一页
        </el-button>
        <el-button disabled>
          {{ currentPage }} / {{ totalPages }}
        </el-button>
        <el-button 
          :icon="ArrowRight"
          :disabled="currentPage >= totalPages"
          @click="nextPage"
        >
          下一页
        </el-button>
      </el-button-group>

      <el-button-group style="margin-left: 12px;">
        <el-button :icon="ZoomOut" @click="zoomOut">缩小</el-button>
        <el-button disabled>{{ Math.round(scale * 100) }}%</el-button>
        <el-button :icon="ZoomIn" @click="zoomIn">放大</el-button>
      </el-button-group>
    </div>

    <el-scrollbar class="pdf-container">
      <div v-if="pdfUrl" class="pdf-content">
        <VuePdfEmbed
          :source="pdfUrl"
          :page="currentPage"
          :scale="scale"
          @rendered="handleRendered"
        />
      </div>

      <div v-else class="loading-container">
        <el-icon class="is-loading" :size="50">
          <Loading />
        </el-icon>
        <p>PDF 加载中...</p>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import VuePdfEmbed from 'vue-pdf-embed'
import { ArrowLeft, ArrowRight, ZoomIn, ZoomOut, Loading } from '@element-plus/icons-vue'
import { readFileContent } from '../../utils/fileHelper'

const props = defineProps({
  file: {
    type: Object,
    required: true
  }
})

const pdfUrl = ref('')
const currentPage = ref(1)
const totalPages = ref(0)
const scale = ref(1.0)

// 加载 PDF
const loadPdf = async () => {
  try {
    pdfUrl.value = ''
    currentPage.value = 1
    totalPages.value = 0
    
    // 如果是 URL 文件，直接使用 URL
    if (props.file.isUrl) {
      pdfUrl.value = props.file.url
      console.log('✓ 使用 URL 加载 PDF:', props.file.url)
    } else {
      // 本地文件，读取内容
      const arrayBuffer = await readFileContent(props.file.raw, 'arrayBuffer')
      const blob = new Blob([arrayBuffer], { type: 'application/pdf' })
      pdfUrl.value = URL.createObjectURL(blob)
      console.log('✓ 使用本地文件加载 PDF')
    }
  } catch (error) {
    console.error('PDF 加载失败:', error)
  }
}

// PDF 渲染完成
const handleRendered = (info) => {
  totalPages.value = info.pages
}

// 上一页
const previousPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--
  }
}

// 下一页
const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++
  }
}

// 放大
const zoomIn = () => {
  if (scale.value < 3) {
    scale.value += 0.2
  }
}

// 缩小
const zoomOut = () => {
  if (scale.value > 0.5) {
    scale.value -= 0.2
  }
}

watch(() => props.file, () => {
  if (props.file) {
    loadPdf()
  }
}, { immediate: true })

onMounted(() => {
  if (props.file) {
    loadPdf()
  }
})
</script>

<style scoped>
.pdf-preview {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #f5f7fa;
}

.pdf-toolbar {
  padding: 16px;
  background: #ffffff;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
}

.pdf-container {
  flex: 1;
  overflow: auto;
}

.pdf-content {
  display: flex;
  justify-content: center;
  padding: 20px;
  min-height: 100%;
}

:deep(.vue-pdf-embed) {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #409EFF;
}

.loading-container p {
  margin-top: 16px;
  font-size: 14px;
}
</style>

